<template>
  <div v-if="data">
    <div class="bilst" v-for="{ id, coverImgUrl } in data" :key="id">
      <!-- 左 -->
      <div class="list-bilst">
        <dl>
          <dt>
            <img :src="coverImgUrl" alt="" />
            <a title="飙升榜" href="javascript:;" class="list-bilst-a"></a>
            <a href="javascript:;" class="list-bilst-tit1">飙升榜</a>
            <a href="javascript:;" class="list-bilst-tit2">播放</a>
            <a href="javascript:;" class="list-bilst-tit3">收藏</a>
          </dt>
          <dd>
            <ul class="songList" v-if="list">
              <li v-for="({ name, id }, index) in list.slice(10, 20)" :key="id">
                <div class="songList-tiao">{{ index + 1 }}</div>
                <div class="songList-name">
                  {{ name }}
                </div>
                <div class="li-hover">
                  <a href="javascript:;" class="songList-a1"></a>
                  <a href="javascript:;" class="songList-a2"></a>
                  <a href="javascript:;" class="songList-a3"></a>
                </div>
              </li>
            </ul>
          </dd>
        </dl>

        
        
      </div>
      <div class="list-bilst">
        <dl>
          <dt>
            <img :src="img1" alt="" />
            <a title="新歌榜" href="javascript:;" class="list-bilst-a"></a>
            <a href="javascript:;" class="list-bilst-tit1">新歌榜</a>
            <a href="javascript:;" class="list-bilst-tit2">播放</a>
            <a href="javascript:;" class="list-bilst-tit3">收藏</a>
          </dt>
          <dd>
            <ul class="songList" v-if="list">
              <li v-for="({ name, id }, index) in list1.slice(10, 20)" :key="id">
                <div class="songList-tiao">{{ index + 1 }}</div>
                <div class="songList-name">
                  {{ name }}
                </div>
                <div class="li-hover">
                  <a href="javascript:;" class="songList-a1"></a>
                  <a href="javascript:;" class="songList-a2"></a>
                  <a href="javascript:;" class="songList-a3"></a>
                </div>
              </li>
            </ul>
          </dd>
        </dl>

        
        
      </div>
      <div class="list-bilst">
        <dl>
          <dt>
            <img :src="img2" alt="" />
            <a title="原创榜" href="javascript:;" class="list-bilst-a"></a>
            <a href="javascript:;" class="list-bilst-tit1">原创榜</a>
            <a href="javascript:;" class="list-bilst-tit2">播放</a>
            <a href="javascript:;" class="list-bilst-tit3">收藏</a>
          </dt>
          <dd>
            <ul class="songList" v-if="list">
              <li v-for="({ name, id }, index) in list2.slice(0, 10)" :key="id">
                <div class="songList-tiao">{{ index + 1 }}</div>
                <div class="songList-name">
                  {{ name }}
                </div>
                <div class="li-hover">
                  <a href="javascript:;" class="songList-a1"></a>
                  <a href="javascript:;" class="songList-a2"></a>
                  <a href="javascript:;" class="songList-a3"></a>
                </div>
              </li>
            </ul>
          </dd>
        </dl>

        
        
      </div>
      <!-- 中 -->
      <div class="list-bilst"></div>
      <!-- 右 -->
      <div class="list-bilst"></div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getData();
    this.getList();
    this.getList1();
    this.getList2();
    // this.getSong();
  },
  data() {
    return {
      data: null,
      list: null,
      list1:null,
      list2:null,
      arr: [],
      newarr: [],
      img2:'',
      img1:'',
    };
  },
  methods: {
    getData() {
      this.axios.get("/toplist/detail?").then((res) => {
        console.log(res);
        this.data = res.data.list.slice(0, 1);
      });
    },
    getList() {
      this.axios.get("/playlist/detail?id=19723756").then((res) => {
        console.log(res);
        // res.data.privileges.forEach((value) => {
        //   this.arr.push(value.id);
        // });
        // this.arr = this.arr.slice(0, 10);
        // console.log(this.arr);
        this.list = res.data.playlist.tracks;
        // console.log(this.list);
      });
    },
    getList1() {
      this.axios.get("/playlist/detail?id=3779629").then((res) => {
        console.log(res);
        // res.data.privileges.forEach((value) => {
        //   this.arr.push(value.id);
        // });
        // this.arr = this.arr.slice(0, 10);
        // console.log(this.arr);
        this.list1 = res.data.playlist.tracks;
        this.img1 = res.data.playlist.coverImgUrl
        // console.log(this.list);
      });
    },
    getList2() {
      this.axios.get("/playlist/detail?id=2884035").then((res) => {
        console.log(res);
        // res.data.privileges.forEach((value) => {
        //   this.arr.push(value.id);
        // });
        // this.arr = this.arr.slice(0, 10);
        // console.log(this.arr);
        this.list2 = res.data.playlist.tracks;
        this.img2 = res.data.playlist.coverImgUrl
        // console.log(this.list);
      });
    },
    // getSong() {
    //   this.arr.forEach((value) => {
    //     this.axios.get(`/song/detail?ids=${value}`).then((res) => {
    //       console.log(res);
    //     });
    //   });
    //   // this.axios.get(`/song/detail?ids=1903876057`).then((res) => {
    //   //   console.log(res);
    //   // });
    // },
  },
};
</script>

<style lang="scss" scoped>
.bilst {
  margin: 20px 20px 0 20px;
  height: 472px;
  padding-left: 1px;
  background: url("../assets/images/index_bill.png");
  background-repeat: no-repeat;
}

/* 左 */
.list-bilst {
  float: left;
  width: 220px;
}
.list-bilst:nth-child(2){
margin-left: 10px;
}
.list-bilst:nth-child(3){
margin-left: 10px;
}

.list-bilst dt {
  position: relative;
  padding: 20px 0 0 19px;
  height: 80px;
}

.list-bilst dt img {
  width: 80px;
  height: 80px;
}

.list-bilst-a {
  position: absolute;
  left: 19px;
  top: 20px;
  width: 80px;
  height: 80px;
  background-image: url("../assets/images/coverall.png");
  background-repeat: no-repeat;
  background-position: -145px -57px;
  z-index: 5;
}

.list-bilst-tit1 {
  position: absolute;
  top: 30px;
  right: 70px;
  font-weight: bold;
  color: #333;
  font-size: 14px;
  z-index: 5;
}

.list-bilst-tit2 {
  text-indent: -9999px;
  position: absolute;
  left: 108px;
  top: 53px;
  display: block;
  width: 22px;
  height: 22px;
  background-image: url("../assets/images/index.png");
  background-repeat: no-repeat;
  background-position: -267px -205px;
}

.list-bilst-tit3 {
  text-indent: -9999px;
  position: absolute;
  left: 140px;
  top: 53px;
  display: block;
  width: 22px;
  height: 22px;
  background-image: url("../assets/images/index.png");
  background-repeat: no-repeat;
  background-position: -300px -205px;
}

.list-bilst dd {
  margin-top: 21px;
}

.songList {
  height: 319px;
}

.songList li {
  position: relative;
  height: 32px;
  line-height: 32px;
}

.songList-tiao {
  color: #c10d0c;
  float: left;
  font-size: 16px;
  width: 35px;
  height: 32px;
  text-align: center;
}
.songList-name {
  display: inline-block;
  width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}

.songList li a {
  width: 170px;
  height: 32px;
  color: #000;
  text-decoration: none;
  font-size: 12px;
  display: block;
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.songList li div.li-hover {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 94px;
  height: 20px;
  display: none;
  margin: 3px 0 0 0;
}

.songList li:hover div.li-hover {
  display: block;
}

.songList li:hover a {
  width: 96px;
}

.songList li div.li-hover a.songList-a1 {
  float: left;
  width: 17px;
  height: 17px;
  margin-left: 12px;
  background-image: url("../assets/images/index.png");
  background-repeat: no-repeat;
  background-position: -267px -268px;
}

.songList li div.li-hover a.songList-a2 {
  float: left;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  margin-left: 10px;
  background-image: url("../assets/images/icon.png");
  background-repeat: no-repeat;
  background-position: 0 -700px;
}

.songList li div.li-hover a.songList-a3 {
  float: left;
  width: 17px;
  height: 17px;
  margin-left: 8px;
  background-image: url("../assets/images/index.png");
  background-repeat: no-repeat;
  background-position: -297px -268px;
}
</style>
